<template>
  <div class="indicator" :class="{ active: isActive }">
    <div class="count">
      <CountTo :endVal="value"></CountTo>
    </div>
    <svg
      width="133"
      height="169"
      viewBox="0 0 133 169"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g filter="url(#filter3_d_1_1053)" class="ellipse-1">
        <path
          d="M100 127C100 130.788 96.597 134.541 90.333 137.404C84.1572 140.227 75.5551 142 66 142C56.4449 142 47.8428 140.227 41.667 137.404C35.403 134.541 32 130.788 32 127C32 123.212 35.403 119.459 41.667 116.596C47.8428 113.773 56.4449 112 66 112C75.5551 112 84.1572 113.773 90.333 116.596C96.597 119.459 100 123.212 100 127Z"
          stroke="#00FFF0"
          stroke-opacity="0.6"
          stroke-width="2"
        />
      </g>
      <g filter="url(#filter1_d_1_1053)" class="ellipse-2">
        <path
          d="M111 132C111 137.174 106.414 142.175 98.2543 145.941C90.1793 149.668 78.9534 152 66.5 152C54.0466 152 42.8207 149.668 34.7457 145.941C26.5857 142.175 22 137.174 22 132C22 126.826 26.5857 121.825 34.7457 118.059C42.8207 114.332 54.0466 112 66.5 112C78.9534 112 90.1793 114.332 98.2543 118.059C106.414 121.825 111 126.826 111 132Z"
          stroke="#00FFF0"
          stroke-opacity="0.4"
          stroke-width="2"
        />
      </g>
      <g filter="url(#filter2_d_1_1053)" class="ellipse-3">
        <path
          d="M128.5 132C128.5 139.697 121.756 146.822 110.484 152.053C99.2531 157.264 83.703 160.5 66.5 160.5C49.297 160.5 33.7469 157.264 22.5163 152.053C11.2441 146.822 4.5 139.697 4.5 132C4.5 124.303 11.2441 117.178 22.5163 111.947C33.7469 106.736 49.297 103.5 66.5 103.5C83.703 103.5 99.2531 106.736 110.484 111.947C121.756 117.178 128.5 124.303 128.5 132Z"
          stroke="#00FFF0"
          stroke-opacity="0.2"
        />
      </g>
      <g filter="url(#filter4_d_1_1053)">
        <ellipse cx="66" cy="122" rx="20" ry="8" fill="#00F0FF" fill-opacity="0.8" />
      </g>
      <path
        d="M80.0001 119.5C80.0001 122.538 73.7321 125 66.0001 125C58.2681 125 52.0001 122.538 52.0001 119.5C52.0001 116.462 58.2681 114 66.0001 114C73.7321 114 80.0001 116.462 80.0001 119.5Z"
        fill="#00FFF0"
      />
      <ellipse cx="66" cy="119" rx="7" ry="3" fill="white" />
      <!-- 白色圆柱 -->
      <path d="M59 119.25L66.5833 0L73 119L59 119.25Z" fill="url(#paint0_linear_1_1053)" />
      <defs>
        <filter
          id="filter0_d_1_1053"
          x="10.2863"
          y="34.472"
          width="111.477"
          height="38.28"
          filterUnits="userSpaceOnUse"
          color-interpolation-filters="sRGB"
        >
          <feFlood flood-opacity="0" result="BackgroundImageFix" />
          <feColorMatrix
            in="SourceAlpha"
            type="matrix"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
            result="hardAlpha"
          />
          <feOffset dy="7" />
          <feGaussianBlur stdDeviation="2.2" />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix
            type="matrix"
            values="0 0 0 0 0 0 0 0 0 0.0215299 0 0 0 0 0.538249 0 0 0 0.25 0"
          />
          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1_1053" />
          <feBlend
            mode="normal"
            in="SourceGraphic"
            in2="effect1_dropShadow_1_1053"
            result="shape"
          />
        </filter>
        <filter
          id="filter1_d_1_1053"
          x="17.3"
          y="111"
          width="98.4"
          height="49.7"
          filterUnits="userSpaceOnUse"
          color-interpolation-filters="sRGB"
        >
          <feFlood flood-opacity="0" result="BackgroundImageFix" />
          <feColorMatrix
            in="SourceAlpha"
            type="matrix"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
            result="hardAlpha"
          />
          <feOffset dy="4" />
          <feGaussianBlur stdDeviation="1.85" />
          <feColorMatrix
            type="matrix"
            values="0 0 0 0 0.115173 0 0 0 0 0.474855 0 0 0 0 0.806868 0 0 0 1 0"
          />
          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1_1053" />
          <feBlend
            mode="normal"
            in="SourceGraphic"
            in2="effect1_dropShadow_1_1053"
            result="shape"
          />
        </filter>
        <filter
          id="filter2_d_1_1053"
          x="0.3"
          y="103"
          width="132.4"
          height="65.7"
          filterUnits="userSpaceOnUse"
          color-interpolation-filters="sRGB"
        >
          <feFlood flood-opacity="0" result="BackgroundImageFix" />
          <feColorMatrix
            in="SourceAlpha"
            type="matrix"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
            result="hardAlpha"
          />
          <feOffset dy="4" />
          <feGaussianBlur stdDeviation="1.85" />
          <feColorMatrix
            type="matrix"
            values="0 0 0 0 0.115173 0 0 0 0 0.474855 0 0 0 0 0.806868 0 0 0 1 0"
          />
          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1_1053" />
          <feBlend
            mode="normal"
            in="SourceGraphic"
            in2="effect1_dropShadow_1_1053"
            result="shape"
          />
        </filter>
        <filter
          id="filter3_d_1_1053"
          x="27.3"
          y="111"
          width="77.4"
          height="39.7"
          filterUnits="userSpaceOnUse"
          color-interpolation-filters="sRGB"
        >
          <feFlood flood-opacity="0" result="BackgroundImageFix" />
          <feColorMatrix
            in="SourceAlpha"
            type="matrix"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
            result="hardAlpha"
          />
          <feOffset dy="4" />
          <feGaussianBlur stdDeviation="1.85" />
          <feColorMatrix
            type="matrix"
            values="0 0 0 0 0.115173 0 0 0 0 0.474855 0 0 0 0 0.806868 0 0 0 1 0"
          />
          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1_1053" />
          <feBlend
            mode="normal"
            in="SourceGraphic"
            in2="effect1_dropShadow_1_1053"
            result="shape"
          />
        </filter>
        <filter
          id="filter4_d_1_1053"
          x="42.3"
          y="114"
          width="47.4"
          height="23.7"
          filterUnits="userSpaceOnUse"
          color-interpolation-filters="sRGB"
        >
          <feFlood flood-opacity="0" result="BackgroundImageFix" />
          <feColorMatrix
            in="SourceAlpha"
            type="matrix"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
            result="hardAlpha"
          />
          <feOffset dy="4" />
          <feGaussianBlur stdDeviation="1.85" />
          <feColorMatrix
            type="matrix"
            values="0 0 0 0 0.115173 0 0 0 0 0.474855 0 0 0 0 0.806868 0 0 0 1 0"
          />
          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1_1053" />
          <feBlend
            mode="normal"
            in="SourceGraphic"
            in2="effect1_dropShadow_1_1053"
            result="shape"
          />
        </filter>
        <linearGradient
          id="paint0_linear_1_1053"
          x1="65.7083"
          y1="39"
          x2="65.7083"
          y2="119.25"
          gradientUnits="userSpaceOnUse"
        >
          <stop stop-color="white" stop-opacity="0" />
          <stop offset="1" stop-color="white" />
        </linearGradient>
      </defs>
    </svg>
  </div>
</template>

<script>
import CountTo from './CountTo.vue';
export default {
  name: 'indicator',
  props: {
    value: {
      type: Number,
      default: 0,
    },
  },
  components: { CountTo },
  data() {
    return {
      isActive: true,
    };
  },
  watch: {},
  created() {},
  methods: {},
};
</script>

<style lang="less" scoped>
.indicator {
  width: 133px;
  height: 169px;
  position: relative;
  transform: scale(0.8);

  @keyframes scale {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(0.3);
    }
    100% {
      transform: scale(1);
    }
  }

  &.active {
    .ellipse-1,
    .ellipse-2,
    .ellipse-3 {
      animation: scale 2s infinite;
      transform-origin: 50% 71%;
    }
  }

  .count {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 30px;
    left: 0;
    font-size: 36px;
    color: #fff;
    font-weight: 1000;
  }
}
</style>
